<script setup>
import { onMounted, ref} from 'vue'
import {useRouter} from 'vue-router';
const router=useRouter();
// 控制选中的导航栏
const currentIndex = ref(null)
// 导航栏数据
const navItems = ref([
  {
    to: '/',
    text: 'GigGo',
    class: 'nav_link',
    style:'font-size: 30px;color:#00B4B3;'
  },
  {
    name:'ForumIndex',
    text: '首页',
    class: 'nav_link',
  },
  {
    to: '/ForumCommunity',
    text: '社区',
    class: 'nav_link'
  },
  {
    to: '/ForumAnswers',
    text: '职场问答',
    class: 'nav_link'
  },
  {
    to: '/ForumPost',
    text: '创作中心',
    class: 'nav_link'
  },
  {
    to: '/ForumMessage',
    text: '消息',
    class: 'nav_link',
    style: 'display: flex; align-items: center;',
    icon: '/src/assets/loginBg/消息.png',
    imgStyle: 'width: 40px; height: 40px;'
  },
  {
    to:'/ForumIntroduction',
    text:'简介',
    class: 'nav_link'
  },
  {
    to: '/login',
    text: '登录/注册',
    class:'nav_link'
  },
  {
    to:'/PersonalCenter',
    text:'个人中心',
    class: 'nav_link'
  },
]);
onMounted(()=>{
  Controller(1);
  router.push({name:'ForumIndex'})
})
// 控制导航栏选项效果
const Controller = (index) => {
  currentIndex.value = index
  console.log("currentIndex", currentIndex.value)
}
// 处理导航点击事件
const handleNavClick = (item, index) => {
  if (item.name) {
    router.push({ name:item.name})
  } else if (item.to) {
    router.push(item.to)
  }
  Controller(index)
}
</script>
<template>
  <div class="all">
    <div id="nav_head">
      <div class="nav_center">
        <div class="nav_item" v-for="(item, index) in navItems" :key="index">
          <a @click="handleNavClick(item, index)" :class="{ active: currentIndex === index }" :id="item.class"
            :style="item.style">
            <img v-if="item.icon" :src="item.icon" :alt="item.text" :style="item.imgStyle" />
            {{ item.text }}
          </a>
        </div>
      </div>
    </div>
    <!-- body-->
    <div class="body">
      <router-view ></router-view>
    </div>
  </div>
</template>
<style scoped>
.all {
  width: 100%;
  min-height:100vh;
  background-color:#F3FCFC;
  padding: 1px;
}
#nav_head {
  width: 100%;
  background-color: rgb(0, 0, 0);
  position: fixed;
  top:0px;
  z-index:999;
}
.nav_center {
  width: 1100px;
  margin: auto;
  height: 70px;
  display: flex;
}

.nav_item {
  width: 200px;
  /* border:1px solid yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
#nav_link {
  width: 80px;
  height: 70px;
  display: block;
  line-height: 70px;
  text-align: center;
  text-decoration: none;
  /* background-color: blue; */
  font-size: 18px;
  font-weight: 600;
  color:white;
}
#nav_link:hover {
  color: #ef0909;
  cursor:pointer;
} 
.active {
  background-color: #00b4b3;
}
.body {
  width: 1200px;
  margin: auto; 
  margin-top: 100px;
  /* border: 1px solid rgb(3, 3, 3); */
}
</style>